<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>围绕中心点旋转</title>
</head>

<body onload="onload()">


<canvas id="canvas" width="1000px" height="1000px">您的浏览器不支持canvas</canvas>

<script type="text/javascript">
    function onload() {
        var canvas = document.getElementById('canvas');
        var ctx1 = canvas.getContext('2d');
        var image1 = new Image();
        image1.onload = function() {
            var xpos = canvas.width/2;
            var ypos = canvas.height/2;
//            ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
//            ctx1.save();
            ctx1.translate(xpos, ypos);
            ctx1.rotate(Math.PI / 2);//旋转90度
            ctx1.translate(-xpos, -ypos);
            ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
//            ctx1.restore();
        }
        image1.src = '/testdata/sj.jpg';
    }
</script>
</body>
</html>